<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" :xs="24">
                <fileTreesCQBC @handleNodeClick="onTreeClick" :tableHeight="treeHeight" :isnoClick="isnoClick"
                    :menuId="menuId">
                </fileTreesCQBC>

            </el-col>
            <!--离线接收数据-->
            <el-col :span="20" :xs="24" v-show="isShow">
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
                    <el-form-item label="数据包名称" prop="title">
                        <el-input v-model="queryParams.title" placeholder="请输入数据包名称" clearable style="width: 240px"
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="接收日期" prop="detectionTime">
                        <el-date-picker v-model="queryParams.receivingTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-table ref="table" v-loading="loading" :data="tableData" :height="tableHeight" border stripe  @sort-change="sortChange">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column label="序号"  align="center" type="index" prop="id"  />
                    <el-table-column label="数据包名称" :sortable="sortable" prop="TITLE" align="center" :show-overflow-tooltip="true" />
                    <el-table-column label="大小(字节)" :sortable="sortable" prop="SIZE" align="center" :show-overflow-tooltip="true" />
                  <el-table-column label="保存时间（年）" :sortable="sortable" prop="SAVE_TIME" align="center">
                    <template slot-scope="scope">

                      <span v-for="item in dict.type.BGQX" :key="item.value">{{ scope.row.SAVE_TIME==item.value?item.label:"" }}</span>
                    </template>
                  </el-table-column>
                    <el-table-column label="接收日期" prop="RECEIVINGTIME" align="center" :sortable="sortable"></el-table-column>
                    <el-table-column label="格式" prop="FORMAT" align="center" :sortable="sortable"></el-table-column>
                    <el-table-column label="存储路径" prop="PATH" align="center" :sortable="sortable"></el-table-column>
                    <el-table-column label="是否通过检测" prop="SIXING" align="center" :sortable="sortable">
                        <!--200 四性检测通过，400四性检测不通过，”“未检测-->
                        <template slot-scope="scope">
                            <span v-if="scope.row.SIXING == '200'">通过</span>
                            <span v-else-if="scope.row.SIXING == '400'">不通过</span>
                            <span v-else>未检测</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button plain type="success" size="mini" @click="handleState(scope.row)">发起审批</el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getlistPost" />

            </el-col>

            <el-col :span="20" :xs="24" v-show="!isShow" class="empty">
                <el-empty :image-size="200"></el-empty>
            </el-col>

        </el-row>



    </div>
</template>
<script>

import { getqueryListPost,deleteIdentifyFqsp } from "@/api/cqbc/dataManage/jdDelete.js"
import fileTreesCQBC from "@/components/fileTreesCQBC/index.vue"  //档案树
import treeHeight from '@/mixins/treeHeight'//计算左侧树的高度
export default {
    mixins: [treeHeight], // 混入方法
    archive_Dicts: ['CARRIER_TYPE','BGQX'],
    components: {
        fileTreesCQBC,
    },
    data() {
        return {
            isnoClick: true, //防止树重复点击
            loading: false,
            // 显示搜索条件
            showSearch: true,
            isShow: false, //是否显示右侧数据 isShow:true,  //判断  著录项目内件按钮是否显示
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                title: undefined,
                receivingTime: undefined,
                order: undefined
            },
            tableHeaderList: [], //table表头数据
            tableData: [],//table列表数据
            tableHeight: undefined,
            ids: undefined,
            single: "",
            multiple: "",
            sortable: "custom",
        }
    },

    created() {
        this.menuId = this.$route.meta.menuId

    },


    methods: {

        //动态设置table的高度
        tableHeightData() {
            this.$nextTick(
                () => {
                    let h = document.documentElement.clientHeight
                    //     console.log(this.$refs.queryForm.$el.offsetHeight, this.$refs.refbut.$el.offsetHeight, "sdklfjklliuhaiorng")
                    h = h - 200
                    if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
                        h = h - this.$refs.queryForm.$el.offsetHeight
                    }

                    // if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
                    //     h = h - this.$refs.refbut.$el.offsetHeight
                    // }
                    // console.log(h,"sdjfdklsjfkl")
                    this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度
                    return h
                }
            )

        },

        // 树节点单击事件
        onTreeClick(data) {

            this.isnoClick = false;
            if (data.categoryId != null) {
                this.isShow = true
            } else {
                this.isShow = false
            }

            if (data.nodeType == null || data.nodeType == "t" || data.nodeType == "f") {
                this.isnoClick = true;
                return false;

            }
            console.log(data,"ksdfjklsdj")
            this.loading = true;
            this.queryParams['categoryId'] = data.categoryId;
            this.queryParams['pageNum'] = 1;
            this.queryParams['pageSize'] = 20;
            this.queryParams['receivingTime']=undefined
            this.queryParams['title'] = undefined;
            if (this.$refs.ref != undefined) {
                this.$refs.table.clearSort()
            }

            this.getlistPost();
        },
        /** 点击树节点,获取table数据*/
        getlistPost() {
            var that = this;
            this.loading = true;
            console.log(this.queryParams,"sdklfjskldfjklsdjfklsd")
            getqueryListPost(this.queryParams).then(response => {
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
                this.tableHeightData();
                this.isnoClick = true;

            }).catch(res=>{
                this.loading = false;
            });
        },

        //表单重置
        resetQuery() {
            this.queryParams.searchcolumn = undefined
            this.queryParams.order = undefined;
            this.queryParams.title=undefined,
            this.queryParams.receivingTime=undefined,
            this.getlistPost();
            this.$refs.table.clearSort()   //情况排序样式
        },
        //点击搜索
        handleQuery() {
            this.getlistPost();
            this.$refs.table.clearSort();
        },

        // //发起审批
        handleState(row) {
            const id = row.ID || this.ids
            this.$modal.confirm('是否确认发起审批?').then(function () { }).then(() => {
                deleteIdentifyFqsp({
                    id:id,
                    categoryId: this.queryParams.categoryId
                }).then(res => {
                    if (res.code == "200") {
                        this.$modal.msgSuccess("发起成功");
                        this.getlistPost();
                    }
                })
            }).catch(() => { });
        },


        //排序
        sortChange(obj) {
            if (obj.order != null) {
                this.queryParams.order= obj.prop + " " + obj.order.substring(0, obj.order.length - 6)
            } else {
                this.queryParams.order = ""
            }
    
            this.getlistPost();
        },






    }
}
</script>

